<template>
  <div id="app">
    <ul id="roll">
      <li>
        <img src="./assets/9.jpg" alt="" />
        <img src="./assets/9.jpg" alt="" />
        <img src="./assets/9.jpg" alt="" />
        <img src="./assets/9.jpg" alt="" />
        <img src="./assets/9.jpg" alt="" />
      </li>
    </ul>
    <button class="botton1" @click="roll('roll', 'left', 10)">左移</button>
    <button class="botton2" @click="roll('roll', 'right', -10)">右移</button>
    <button class="botton3" @click="roll('roll', 'up', 10)">上移</button>
    <button class="botton4" @click="roll('roll', 'down', -10)">下移</button>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    roll(id, direction, speed) {
      // 获取节点
      var content = document.getElementById(id);
      var slide = content.getElementsByTagName("li")[0];
      var img = content.getElementsByTagName("img");
      var speed = parseInt(speed) || 10;
      // 获取图片数量
      var imgnum = img.length;

      // 获取容器的宽高

      // var   cwidth=content.clientWidth
      //  var  cheight=content.clientHeight
      var cwidth = window.getComputedStyle(content, null)["width"];
      var cheight = window.getComputedStyle(content, null)["height"];
      var cwidth = +cwidth.slice(0, cwidth.length - 2);
      var cheight = +cheight.slice(0, cheight.length - 2);

      //设置图片样式
      for (var i = 0, l = img.length; i < l; i++) {
        img[i].style.cssText =
          "float:left:width:" + cwidth + "px;height:" + cheight + "px";
      }

      // 设置宽度
      slide.style.width = imgnum * 2 * cwidth + "px";
      slide.innerHTML += slide.innerHTML;

      // 水平 垂直方向的临界值
      var level = slide.offsetWidth / 2;
      var vertical = imgnum * cheight;

      switch (direction) {
        case "left":
          var dela = 0;
          var rolling = function () {
            dela == -level ? (dela = 0) : dela--;
            slide.style.left = dela + "px";
          };
          break;
        case "right":
          var dela = -level;
          var rolling = function () {
            dela == 0 ? (dela = -level) : dela++;
            slide.style.left = dela + "px";
          };
          break;

        case "up":
          slide.style.width = img[0].width + "px";
          var dela = 0;
          var rolling = function () {
            dela == -level ? (dela = 0) : dela--;
            slide.style.top = dela + "px";
          };
          break;

        case "down":
          slide.style.width = img[0].width + "px";
          var dela = -vertical;
          var rolling = function () {
            dela == 0 ? (dela = -vertical) : dela++;
            slide.style.top = dela + "px";
          };
          break;
      }
      var timer = setInterval(rolling, speed);
      content.onmouseover = function () {
        clearInterval(timer);
      };

      content.ommouseout = function () {
        timer = setInterval(rollig,speed);
      };
    },
  },
};
</script>


<style lang="less">
* {
  margin: 0;
  padding: 0;
}
#roll {
  width: 80vw;
  height: 50vh;
  overflow: hidden;
  position: relative;
  list-style: none;
  border: 1px solid red;
  margin: 0 auto;
  li {
    position: absolute;
  }
}
</style>
